import React, { Component } from 'react';
import './yangshi/style.scss';
import { withRouter } from 'react-router-dom';
import { updateCart, getCart } from './../../api';
import MyToast from './../../components/mytoast';
// import Cartlist from './../../components/cartlist'
class Com extends Component {
    constructor (props) {
        super(props);
        this.state = {
            flag:true,
            addressflag: false,
            totalPrice: 0,
            value: 1,
            cartlist: [],//1
            allChecked: true
        }
    }
    componentDidMount () {
        // this.refs.num.value = this.state.value1;
        getCart({ userid: localStorage.getItem('userid')}).then(res => {
      console.log(res.data)
      if (res.data.code === '10119') {
        MyToast.info('请先登录')
        this.props.history.push('/other/login')
      } else if (res.data.code === '10012') {
        MyToast.info('购物车空空如也')
        this.setState({
          flag: false
        })
      } else {
        res.data.data.map(item => {
          item.checked = true
          return ''
        })
        this.setState({
          flag: true,
          cartlist: res.data.data
        })
        this._totalNum()
      }
    })
    }
    render () {
        return (
            <div className="box">
                {/* <header className="header">购物车头部</header> */}
                <div className="content">
                    <div className="shop">
                        {
                            this.state.flag ? <div className="haveshop">
                                {/* 购物车有商品时 */}
                                <div className="top">
                                    {/* 购物车顶部 */}
                                    <div className="cart-header">
                                        <div className="cart-type-box">
                                            <span className="selected" data-type="0">基础</span>
                                        </div>
                                        <div className="pull-right shopping-cart-editor border-left iconfont iconshezhi-copy-copy"></div>
                                    </div>
                                    {/* 地址部分 */}
                                    {this.state.addressflag ? <div>有地址</div> : <div>
                                        <div className="goods-location-box" onClick={this.newAddress.bind(this)}>
                                            <span className="iconfont icondizhi icon-goods-location"></span>
                                            <span className="address-box">暂无地址,请点击选择地址</span>
                                            <span className="trangel"></span>
                                        </div>
                                    </div>}
                                    {/* 导航部分 */}
                                    <div className="goods-delivery-method">
                                        <span data-type="-1" className="selected">全部
                                            <span className="bottom-line"></span>
                                        </span>
                                        <span data-type="1" className="">快递
                                            <span className="bottom-line"></span>
                                        </span>
                                        <span data-type="3" className="">自提
                                            <span className="bottom-line"></span>
                                        </span>
                                        <span data-type="2" className="">同城
                                            <span className="bottom-line"></span>
                                        </span>
                                    </div>
                                    {/* 购物车商品列表 */}
                                    <div className="shoppingCart-wrap page">
                                        {
                                            this.state.cartlist.map((item, index) => (
                                                <div className="shoppingCart-goods-list" key={index}>
                                                    <div className="list1">
                                                        <input type="checkbox" data-index="0" className="shoppingCart-check-box checked" onChange= {this.check.bind(this,event,item,index)} checked={item.checked}/>
                                                        <div className="shoppingCart-goods-content">
                                                            <div className="shoppingCart-goods-cover">
                                                                <img src={item.proimg} />
                                                            </div>
                                                            <div className="goods-content-box">
                                                                <div className="shoppingCart-goods-title">{item.proname}</div>
                                                                <div className="shoppingCart-price-box">
                                                                    <span className="real-price">¥{item.price}</span>
                                                                    <div className="goods-number-box pull-right">
                                                                        <div className="goods-num-mius changenum" data-index="0" onClick={this.reduceNum.bind(this, item, index)}>-</div>
                                                                        <input type="number" className="goods-num-box changenum" data-index="0" value={item.num} onChange = { (e)=> this.getvalue( index,e ) }/>
                                                                        <div className="goods-num-plus changenum" data-index="0" onClick={this.addNum.bind(this, item, index)}>+</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            )) 
                                        }
                                    </div>
                                </div>
                                {/* 结算部分 */}
                                <div className="shoppingCart-bottom-nav">
                                    <input type="checkbox" checked = { this.state.allChecked }className="shoppingCart-check-box checked" onChange = {this.selectAll.bind(this)} />
                                    <span className="select-all">全选</span>
                                    <div className="pull-right total-price-box">
                                        <div className="shoppingCart-all-price">¥{ this.state.totalPrice }.00</div>
                                        <div className="no-contain-freight">不含运费</div>
                                    </div>
                                    <button type="button" data-type="-1" className="pull-right shoppingCart-goto-pay">结算(1)</button>
                                </div>

                                </div> : <div className="emptyshop">
                                {/* 购物车为空时 */}
                                <div class="shoppingCart-null">
                                    <img src="http://cdn.jisuapp.cn/static/webapp/images/xcx-goods/shopping-cart-null.png" />
                                    <div class="shoppingCart-null-label">购物车空空哒</div>
                                    <div class="go-home-page">去逛逛</div>
                                </div>
                                <div class="shoppingCart-wrap page" id="shoppingCart">
                                    <div class="shoppingCart-goods-list"></div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        )
    }
    getvalue=(index,e)=>{
        this.setState({
          value:e.target.value
        })
    }
    //减少
  reduceNum (item, index) {
    let cartlist = this.state.cartlist;
    let num = item.num;
    if (num > 1) {
        num--
    } else {
        num = 1
    }
    updateCart({cartid: item.cartid, num}).then((res) => {
        console.log(res.data)
        if (res.data.code  === '10119') {
            MyToast.info('请先登录')
            this.props.history.push('/home')
        } else {
            MyToast.info('修改成功')
            console.log(cartlist)
            cartlist[index].num = num;
            this.setState({
                cartlist
            })
            this._totalNum()
        }
    })
  }
    //增加
  addNum (item, index) {
    let cartlist = this.state.cartlist;
    let num = item.num
    num++
    console.log('num', num)
    updateCart({cartid: item.cartid, num}).then((res) => {
        if (res.data.code === '10119') {
            MyToast.info('请先登录')
            this.props.history.push('/home')
        } else {
            MyToast.info('修改成功')
            console.log(num)
            cartlist[index].num = num;
            this.setState({
                cartlist
            })
            this._totalNum()
        }
    })
  }
    //   总价
  _totalNum () {
    let totalPrice = 0;
    this.state.cartlist.map(item => {
       item.checked ? totalPrice += item.price * item.num : totalPrice += 0;
        return ''
    })
    this.setState({
        totalPrice
    })
  }
// 是否勾选产品
  check (event,item,index) {
    let cartlist = this.state.cartlist;
    cartlist[index].checked = !cartlist[index].checked;
    if(cartlist[index].checked) {
        let test = cartlist.every(item => {
            return item.checked === true
        })
        if (test) {
            this.setState({
                allChecked: true,
                cartlist
              })
          } else {
            this.setState({
                allChecked: false,
                cartlist
            })
        }
    } else {
        this.setState({
            allChecked: false,
            cartlist
        })
    }
    this._totalNum()
  }
//   全选和反选
selectAll () {
    let cartlist = this.state.cartlist;
    let allChecked = this.state.allChecked;
    allChecked = !allChecked;
    cartlist.map(item => {
        item.checked = allChecked
        return ""
      })
      this.setState({
        cartlist,
        allChecked
      })
      this._totalNum()
}
// 添加地址
newAddress () {
    console.log(this.state)
  let addressflag = this.state.addressflag;
  if(addressflag) {
      Toast('有地址')
  } else {
    this.props.history.push('/other/address')
  }
}

}
export default Com